<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" fullscreen append-to-body custom-class="notice_form_dialog">
		<el-form v-bind="formConfig" :model="formData" :rules="formRules" v-loading="loading">
			<div class="notice_form_body">
				<el-form-item label="公告标题" prop="title">
					<el-input v-model="formData.title" :maxlength="64" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="公告内容" class="content">
					<sw-tiny-editor v-model="formData.content" height="100%" type="all" v-if="visible" />
				</el-form-item>
			</div>
			<div class="notice_form_attr">
				<div class="content">
					<!-- <el-form-item><sw-image-uploader v-model="formData.coverId" size="328" ratio="16:9" /></el-form-item> -->
					<el-form-item label="公告作者">
						<el-input v-model="formData.author" readonly></el-input>
					</el-form-item>
					<el-form-item label="发布时间" prop="releaseTime">
						<el-date-picker v-bind="dateConfig" v-model="formData.releaseTime" style="width: 100%" />
					</el-form-item>
					<el-form-item label="公告排序">
						<el-input-number v-model="formData.sort" controls-position="right" :min="1" style="width: 150px" />
					</el-form-item>
					<el-form-item prop="siteId">
						<sw-file-uploader type="5" v-model="formData.siteId" />
					</el-form-item>
				</div>
				<div class="button">
					<el-button size="medium" type="primary" @click="handleSubmitForm()">确定</el-button>
					<el-button size="medium" @click="visible = false">取消</el-button>
				</div>
			</div>
		</el-form>
	</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import formMixins from '@/mixins/formMixins';
import { journalismDetail, addedJournalism, updateJournalism } from '@/api/system/tbSysJournalism';
export default {
	mixins: [formMixins],
	data() {
		return {
			formName: '通知公告',
			formRules: {
				title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
				content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
				releaseTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }]
			},
			dateConfig: {
				type: 'date',
				valueFormat: 'yyyy-MM-dd',
				placeholder: '选择发布日期'
			},
			uploadFiles: [],
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		detailData() {
			return eval(journalismDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedJournalism : updateJournalism);
		},
		requestParams() {
			return { id: this.dataId, isRecord: 2 };
		}
	},
	methods: {
		formatFormParams(data) {
			let author = this.addOrEdit ? this.userInfo.username : data.author;
			this.$set(this.formData, 'author', author);
		}
	}
};
</script>
<style lang="scss">
.notice_form_dialog .el-dialog__body {
	padding: 0;
}
</style>
<style lang="scss" scoped>
.dialog_form_wrapper {
	display: flex;
	&:deep(.el-form-item) {
		margin-bottom: 16px;
	}
	&:deep(.el-form-item.entire) {
		display: flex;
		align-items: flex-start;
		.el-form-item__label {
			line-height: 36px;
			padding-bottom: 0;
		}
		.el-form-item__content {
			flex: 1;
			overflow: hidden;
		}
	}
	&:deep(.el-form-item__label) {
		font-size: 15px;
		text-align: left;
		font-weight: bold;
	}
}
.notice_form_body {
	display: flex;
	flex-direction: column;
	padding: 4px 16px 0;
	overflow: hidden;
	flex: 1;
	&:deep(.el-form-item.content) {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		flex: 1;
		.el-form-item__content {
			flex: 1;
			overflow: hidden;
		}
	}
	.sw_tinymce_editor {
		height: 100%;
	}
}
.notice_form_attr {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-left: 1px solid #e5e5e5;
	flex-shrink: 0;
	width: 300px;
	.content {
		padding: 4px 16px 0;
	}
	.button {
		padding: 16px;
		border-top: 1px solid #e5e5e5;
	}
}
</style>
